<template>
  <div class="woyaofankuii">
    <div class="woyaofankuii-a">
      <div class="woyaofankuii-a-a">返回</div>
      <div class="woyaofankuii-a-aa">我要反馈</div>
      <div class="woyaofankuii-a-aaa"></div>
    </div>
    <div class="woyaofankuii-b">
      <div class="woyaofankuii-b-a"></div>
      <div class="woyaofankuii-b-aa"></div>
      <div class="woyaofankuii-b-aaa">诉求内容</div>
    </div>
    <div class="woyaofankuii-c">
      <div class="woyaofankuii-c-a">诉求类型</div>
      <div class="woyaofankuii-c-aaaaa">
        <div class="woyaofankuii-c-aa">咨询</div>
        <div class="woyaofankuii-c-aaa"></div>
      </div>
    </div>
    <div class="woyaofankuii-d"></div>
    <div class="woyaofankuii-c">
      <div class="woyaofankuii-c-a">诉求分型</div>
      <div class="woyaofankuii-c-aaaaa">
        <div class="woyaofankuii-c-aa">人力资源</div>
        <div class="woyaofankuii-c-aaa"></div>
      </div>
    </div>
    <div class="woyaofankuii-d"></div>
    <div class="woyaofankuii-c">
      <div class="woyaofankuii-c-a">诉求分型</div>
      <input
        type="text"
        placeholder="请输入不少于20个字的描述"
        class="woyaofankuii-c-aaaaa"
      />
    </div>
    <div class="woyaofankuii-b woyaofankuii-bb">
      <div class="woyaofankuii-b-a"></div>
      <div class="woyaofankuii-b-aa"></div>
      <div class="woyaofankuii-b-aaa">诉求图片</div>
    </div>
    <div class="woyaofankuii-g">
      <img
        src="../../assets/images/tupian1.png"
        alt=""
        class="woyaofankuii-g-a"
      />
    </div>
    <div class="woyaofankuii-h">
      <div class="woyaofankuii-h-a">
        每个工单附件数量不超过3个，单个附件大小不超过10M，
      </div>
      <div class="woyaofankuii-h-aa">
        附件总大小不超25M，支持常见图片类型，如jpg，png等。
      </div>
    </div>
      <div class="woyaofankuii-j">提交</div>

  </div>
</template>

<script>
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {},
  /* 2. Vue数据 */
  props: {},
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {};
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {},
  mounted() {
  },
  destroy() {},
  /* 5. Vue方法 */
  methods: {},
};
</script>

<style scoped lang="scss">
.woyaofankuii {
  .woyaofankuii-a {
    height: 92px;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    border: 1px solid red;
    .woyaofankuii-a-a {
      font-family: Source Han Sans SC;
      font-weight: 500;
      font-size: 17px;
      color: #000000;
      margin: 61px 0 0 17px;
    }
    .woyaofankuii-a-aa {
      font-family: Source Han Sans SC;
      font-weight: 500;
      font-size: 17px;
      color: #000000;
      margin-top: 61px;
    }
    .woyaofankuii-a-aaa {
      width: 40px;
      margin: 61px 17px 0 0;
    }
  }
  .woyaofankuii-b {
    height: 34px;
    display: flex;
    background: #eff6ff;
    align-items: center;
    .woyaofankuii-b-a {
      height: 13px;
      width: 3px;
      background-color: #2592efff;
      margin-left: 14px;
    }
    .woyaofankuii-b-aa {
      height: 13px;
      width: 1px;
      background-color: #86bff7ff;
    }
    .woyaofankuii-b-aaa {
      font-family: Source Han Sans SC;
      font-weight: 600;
      font-size: 15px;
      color: #2c2c2c;
      margin-left: 5px;
    }
  }
  .woyaofankuii-bb {
    margin-top: 50px;
  }
  .woyaofankuii-c {
    display: flex;
    margin: 32px 13px 0 32px;
    .woyaofankuii-c-a {
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      font-size: 15px;
      color: #2c2c2c;
      line-height: 25px;
    }
    .woyaofankuii-c-aaaaa {
      margin-left: auto;
      display: flex;
      align-items: center;
      .woyaofankuii-c-aa {
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        font-size: 14px;
        color: #989898;
        line-height: 14px;
      }

      .woyaofankuii-c-aaa {
        background: #e0e1e5;
        width: 6px;
        height: 10px;
        border: 1px solid red;
        margin-left: 5px;
      }
    }
  }
  .woyaofankuii-d {
    border: 1px solid #e0e1e5;
    margin: 29px 22px 0 22px;
  }
  .woyaofankuii-g {
    margin: 15px 22px 0 22px;
    height: 115px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #e0e1e5;
    .woyaofankuii-g-a {
      width: 34px;
      height: 31px;
    }
  }
  .woyaofankuii-h {
    margin: 14px 22px 0 22px;
  }
  .woyaofankuii-h-a {
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    font-size: 14px;
    color: #989898;
    line-height: 18px;
  }
  .woyaofankuii-h-aa {
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    font-size: 14px;
    color: #989898;
    line-height: 18px;
  }
  .woyaofankuii-j{
    margin: 29px 22px 0 22px;
    height: 41px;
background: #4B91E7;
border-radius: 20px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
font-size: 17px;
color: #FFFFFF;
line-height: 41px;
text-align: center;
  }
}
</style>
